ホームに戻る

出典 :

Grid クラス (System.Windows.Controls) | Microsoft Docs Panel クラス (System.Windows.Controls) | Microsoft Learn C#WPFの道#3！Gridの使い方をわかりやすく解説！｜ピーコックアンダーソン WPF/XAML : TabControl 中の TabItem の高さを自動で揃える - i++ 方法: グリッド間でサイズ設定プロパティを共有する - WPF .NET Framework | Microsoft Learn

関連 :

Canvas DockPanel StackPanel TabControl コントロールの重ね描き

目次 :

Grid コントロール( System.Windows.Controls.Grid )

コントロールを配置するための下地となる Panel の一種で、行と列からなる格子領域を規定する。 DataGrid との混同に注意。

具体例

下図のような3行3列の配置を考える。
配置例

XAML

<Window> :  <Grid>  <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>  <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions>   <Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"/>  <Image Grid.Column="0" Grid.Row="1" Grid.RowSpan="2"/>  <Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="2"/>  <Canvas Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"/>  <Button Grid.Column="2" Grid.Row="2"/> </Grid> : </Window>

解説

Grid の使用に当たっては、Grid.RowDefinitions 、Grid.ColumnDefinitions で行と列を規定する。
Height (行の高さ)、Width (列の幅)は以下の値が設定可能である。
- "Auto" : 格納するコントロールによって自動的に決定する。
- "*" (既定): 割り当て可能な範囲を均等に分割する。"n*" とすると、n 倍量を割り当てる( n は 1 以上の自然数)。
- "(数値)" : 高さ・幅をpixel単位で直接指定する。
① : Label は左上端を Column 0 、Row 0 に配置する。2列を割り当てるため ColumnSpan="2" とする。
② : Image は左上端を Column 0 、Row 1 に配置する。2行を割り当てるため RowSpan="2" とする。
③ : Image は左上端を Column 1 、Row 1 に配置する。2行を割り当てるため RowSpan="2" とする。
④ : Canvas は左上端を Column 2 、Row 0 に配置する。2行を割り当てるため RowSpan="2" とする。
⑤ : Button は Column 2 、Row 2 に配置する。

"*" を用いる際の注意点

高さまたは幅を "*" で指定した場合、Grid(または親要素)のサイズが確定していなければ正常に動作しない。

Grid 要素間のサイズ共有

異なる Grid 同士の列の幅、または行の高さを共有することができる。
用途の一つとして、TabItem の高さを揃えることが挙げられる。
配置例

TabItem (およびその親となる TabControl )は、内容に合わせて高さが自動的に調整される。このため、通常はタブを選択するごとに TabControl や Window 全体の高さが変わってしまう。
これは Grid を用いて高さを共通化させることで抑制することができる。

ウィンドウ(XAML)

<Window x:Class="WFPFunctionTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WFPFunctionTest" mc:Ignorable="d" Title="TabControl" SizeToContent="WidthAndHeight"> <StackPanel>  <TabControl Grid.IsSharedSizeScope="True">  <TabItem Header="Item 1">  <Grid> <Grid.RowDefinitions>   <RowDefinition SharedSizeGroup="TabControlGroup"/> </Grid.RowDefinitions> <StackPanel Height="200">  </StackPanel> </Grid> </TabItem>  <TabItem Header="Item 2">  <Grid> <Grid.RowDefinitions>  <RowDefinition SharedSizeGroup="TabControlGroup"/> </Grid.RowDefinitions> <StackPanel Height="100">  </StackPanel> </Grid> </TabItem> </TabControl> </StackPanel> </Window>

2つのタブを有する TabControl を例に挙げる。
TabItem の高さはコンテンツによって決まるため、通常"Item 1"は200pixel、"Item 2"は100pixelとなる。
しかしそれぞれの TabItem 内に Grid を配置し、RowDefinition の SharedSizeGroup を設定することで、Grid の行の高さ = TabItem の高さが共有される。
要点は以下である。

サイズの共有が有効となるのは、IsSharedSizeScope = "True" となっている区間に限られる(ここでは TabControl )
SharedSizeGroup に設定した識別名(ここでは "TabControlGroup" )が共通の行または列同士でサイズが共有される

但し、TabItem の高さがタブを開いた際に計算されることに変わりは無く、低いタブ⇒高いタブの順に開いた場合は TabControl の高さが伸びる。
高いタブを先に開いた場合は縮むことは無い。

コントロールの重ね描き

複数のコントロールで Grid.Column 、Grid.Row が重複する場合、それらは重ねて描画される。このとき Panel.ZIndex の値が大きいものがより手前に表示される。リンク先も併せて参照のこと。